<!--
 * @Description: 交易管理-详情 TODO
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-03-05
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-02-14
-->

<script lang="ts" setup>
  import { computed, ref, watch } from 'vue'

  import { requestUpdatePosition } from '/@/api/business/company/position'

  const props = defineProps({
    visible: { type: Boolean, default: false },
    positionId: { type: Number, default: NaN },
  })

  const emits = defineEmits(['update:visible'])

  const visible = computed({
    get: () => props.visible,
    set: (val) => emits('update:visible', val),
  })

  watch(
    () => visible.value,
    (newVal) => {
      if (newVal) onPageShow()
      else onPageHide()
    },
  )

  /**
   * 页面显示
   */
  const onPageShow = () => initData()

  /**
   * 页面关闭
   */
  const onPageHide = () => {}

  /** 交易信息数据 */
  const data = ref({})

  /**
   * 初始化数据
   */
  const initData = () => {
    // TODO
    data.value = { account: '19200****86', type: 1, category: 2, status: 1, count: 1, time: '2024.08.29 11:20:33', address: '从 0xb32e9A84Ae0B55b8ab715e4Ac793a61B277bAFA3 到 0xb32e9A84Ae0B55b8ab715e4Ac793a61B277bAFA3', fee: 0, transferId: '202403987499273' }
  }
</script>

<template>
  <div class="detail">
    <a-modal v-model:visible="visible" title="交易信息" :width="600" :footer="null">
      <a-form layout="vertical">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="账号">
              <span>{{ data.account }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item label="类型">
              <span v-if="data.type === 1" style="color: green">发送</span>
              <span v-else-if="data.type === 2" style="color: #d66">接收</span>
            </a-form-item>
          </a-col>
          <a-col :span="9">
            <a-form-item label="币种">
              <span v-if="data.category === 1">BTC</span>
              <span v-else-if="data.category === 2">ETH</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="交易状态">
              <a-tag v-if="data.status === 1" color="#aaa">待处理</a-tag>
              <a-tag v-else-if="data.status === 2" color="green">成功</a-tag>
              <a-tag v-else-if="data.status === 3" color="red">失败</a-tag>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item label="数量">
              <span>{{ data.count }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="9">
            <a-form-item label="交易时间">
              <span>{{ data.time }}</span>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="交易地址">
          <span>{{ data.address }}</span>
        </a-form-item>
        <a-form-item label="交易费用">
          <span>{{ data.fee }}</span>
        </a-form-item>
        <a-form-item label="交易ID">
          <span>{{ data.transferId }}</span>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style lang="less" scoped></style>
